<template>
    <view>
        <u-navbar back-text="返回"></u-navbar>
        <view class="content">
            <view class="title">{{ article.title }}</view>
            <view class="author">
                <view class="avatar">
                    <u-avatar :src="src"></u-avatar>
                </view>
                <view class="user">
                    <view class="username">{{article.editor}}</view>
                    <!-- <u-divider height="15" border-color="black" :use-slot="false" half-width="50%"></u-divider> -->
                    <view class="time">{{article.time}}</view>
                </view>
                <view class="follow">
                    <view v-if="follow==0">
                        <u-button type="primary" size="mini" :ripple="true" :custom-style="customStyle"
                            @click="followme()">关注</u-button>
                    </view>
                    <view v-else>
                        <u-button type="success" size="mini" :ripple="true" :custom-style="customStyle"
                            @click="followme()">已关注</u-button>
                    </view>
                </view>
            </view>
            <view>
                <!-- 正文内容 -->
                <view class="u-content">
                    <u-parse :html="article.content" :selectable="true" :tag-style="style" :show-with-animation="true">
                    </u-parse>
                </view>
                <view class="action">
                    <view class="shape" @click="onlike()">
                        <view v-if="likestatus==0">
                            <u-icon name="thumb-up" size="50" :label="likenum" label-size="35"></u-icon>
                        </view>
                        <view v-else>
                            <u-icon name="thumb-up-fill" color="#ffaa00" size="50" :label="likenum" label-size="35"></u-icon>
                        </view>
                    </view>
                    <!-- <u-button shape="circle" :ripple="true" ripple-bg-color="#ff0000" :custom-style="actionStyle">
                        <u-icon name="thumb-up" size="50"></u-icon> 32
                    </u-button> -->
                    <!-- <u-button shape="circle" :ripple="true" ripple-bg-color="#ff0000" :custom-style="actionStyle"> -->
                    <view class="shape" @click="starthis()">
                        <view v-if="!isStar">
                            <u-icon name="star" size="50" label="收藏" label-size="35"></u-icon>
                        </view>
                        <view v-else>
                            <u-icon name="star-fill" color="#ffaa00" size="50" label="已收藏" label-size="35"></u-icon>
                        </view>
                    </view>
                    <!-- </u-button> -->
                </view>
            </view>
            <view>
                <view class="comment-title">评论</view>

                <view class="comment">
                    <view v-if="commentList.length==0" class="nocomment">暂无评论，快成为第一个吧</view>
                    <view v-for="item in commentList" :key="item.id" class="comment-box">
                        <view class="comment-avatar">
                            <u-avatar :src="item.avatar" size="mini"></u-avatar>
                        </view>
                        <view class="comment-info">
                            <view class="comment-name">
                                {{item.userName}}
                            </view>
                            <view class="comment-time">
                                {{item.createTime}}
                            </view>
                            <view class="comment-main">
                                <u-read-more ref="uReadMore" :shadow-style="shadowStyle" :show-height="210"
                                    :text-indent="textindex" :close-text="opentext" color="#5c5c5c">
                                    <rich-text :nodes="item.content"></rich-text>
                                </u-read-more>
                            </view>
                            <!-- <view class="comment-action">
                                <u-icon name="thumb-up" size="40"></u-icon>365
                                <u-icon name="chat" size="40"></u-icon>
                            </view> -->
                        </view>
                    </view>
                </view>

            </view>
            <u-toast ref="uToast" />
            <view class="iconfooter">
                <view class="icon" @click="goReply()">
                    <u-icon color="#ffffff" size="50" name="arrow-down" label="评论" label-pos="bottom" label-size="20"
                        label-color="#ffffff"></u-icon>

                </view>
            </view>
            <view class="footer">
                <!-- <u-input v-model="value" type="text" border="true" /> -->
                <view class="inTest">
                    <u-input v-model="value" :type="type" :height="height" :border="border" border-color="#999999"
                        :auto-height="autoHeight" :custom-style="inputstyle" @click="dontReply()" />
                </view>
                <view class="message" @click="reply()">
                    发 布
                    <!-- <u-link>发布</u-link> -->
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getSiteOne,
        getComments,
        addComment,
        getPersonageOne,
        getTravelOne,
        getUserAttention,
        addAttention,
        deleteAttention,
        getUserFollow,
        tolike,
        getlikenum,
        getlikestatus,
    } from "../../api/data.js"
    export default {
        data() {
            return {
                content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
                style: {
                    // 字符串的形式
                    // p: 'font-size:32rpx;padding:0 40rpx;',
                    // span: 'font-size: 30rpx',
                    // img: 'padding: 20rpx 0'
                },
                src: '/static/avator.png',
                customStyle: {
                    width: '100rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
                    marginTop: '20rpx',
                    // marginRight: '10rpx'
                },
                actionStyle: {
                    width: '170rpx',
                    padding: '5rpx 0',
                    verticalAlign: 'middle',
                    marginRight: '20rpx',
                    marginLeft: '20rpx',
                    display: 'inline-block',
                    fontSize: 32
                },
                follow: 0,
                value: '',
                type: 'textarea',
                border: true,
                height: 50,
                autoHeight: true,
                inputstyle: {
                    // padding: '5rpx',
                    // border:'2rpx solid',
                    // borderColor: '#999999',
                    // borderRadius:'20rpx',
                    // textAlign:'center',
                    // letterSpacing:'10rpx',
                    fontSize: '35rpx',
                },
                shadowStyle: {
                    backgroundImage: "none",
                    paddingTop: "0",
                    marginTop: "20rpx"
                },
                contentComment: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
                // mstart: 2,
                // fbstyle: {
                //     border: none,
                // }
                // hairline: false,
                // fbbutton: {
                //     border: none,
                // },
                opentext: '展开',
                myArticleId: 1,
                article: {
                    title: '',
                    editor: '',
                    time: '',
                    content: '',
                },
                commentList: [],
                textindex: '0',
                articleType: 1,
                comment: {
                    userId: 0,
                    content: '',
                    type: 1,
                    articleId: 0,
                },
                isStar: false,
                starId: 0,
                attention: {
                    userId: 0,
                    attentionId: 0,
                    type: 0,
                },
                likestatus: 0,
                likenum:0,


            }
        },
        onLoad: function(option) {
            // console.log(option.type)
            this.myArticleId = option.id
            this.articleType = option.type
        },
        onShow() {
            this.userInfo = uni.getStorageSync('userInfo')
            this.token = uni.getStorageSync('token')
            this.comment.userId = this.userInfo.id
            this.comment.articleId = this.myArticleId
            this.comment.articleType = this.articleType
            this.attention = {
                userId: this.userInfo.id,
                attentionId: this.myArticleId,
                type: this.articleType
            }
            if (this.articleType == 1) {
                this.getSiteOne()
            }

            if (this.articleType == 2) {
                this.getPersonageOne()
            }

            if (this.articleType == 3) {
                this.getTravelOne()
            }
            const _this = this
            this.getComment()


        },
        onReady() {
            if (this.token != '') {
                this.getAttentionInfo()
                this.getlikestatus()
                
            }
            this.getlikenum()

        },
        watch: {

            'article.editor': {
                handler(newName, oldName) {
                        // const _this = this
                        // this.$nextTick(function() {
                        //     //方法
                        //     console.log("sds")
                        //     _this.getFollowInfo()
                        // });
                        console.log(newName)
                        if(this.token!='')
                        this.getFollowInfo(newName)
                    },
                    // immediate: true

            }
        },
        methods: {
            getlikestatus(){
                const _this=this
                getlikestatus({
                    newsId: this.myArticleId,
                    userId:this.userInfo.id,
                    entityType :this.articleType
                }).then(function(res){
                    // console.log(res.data)
                    _this.likestatus=res.data
                    
                })
            },
            getlikenum(){
                const _this=this
                getlikenum({
                    newsId: this.myArticleId,
                    entityType :this.articleType,
                }).then(function(res){
                    // console.log(res.data)
                    _this.likenum=res.data
                    
                })
            },
            onlike(){
                const _this=this
                tolike({
                    newsId: this.myArticleId,
                    userId:this.userInfo.id,
                    entityType :this.articleType
                }).then(function(res){
                    // console.log(res.data)
                    _this.likenum=res.data
                    _this.likestatus=1
                    
                })
            },
            followme() {
                this.dontReply()
                // this.follow = 1
                const _this = this
                if (this.token != '') {
                    if (this.follow == 0)
                        addAttention({
                            userId: this.userInfo.id,
                            userName: this.article.editor,
                            // attentionId: ,
                            type: 0,
                        }).then(function(res) {
                            if(res.data.code==200){
                               _this.getFollowInfo(_this.article.editor)
                            }
                            console.log(res)
                        })
                    else {
                        console.log(this.starId)
                        deleteAttention({id:this.follow}).then(function(res){
                            if(res.data.code==200){
                                 _this.getFollowInfo(_this.article.editor)
                            }
                        })

                    }

                }
            },
            test() {
                console.log("sd")
            },
            test2() {
                uni.redirectTo({
                    url: '/pages/login/index'
                });
            },
            getSiteOne() {
                const _this = this
                getSiteOne({
                    id: this.myArticleId
                }).then(function(res) {
                    // console.log(res.data)
                    _this.article.title = res.data.data.siteTitle
                    _this.article.editor = res.data.data.siteAuthor
                    _this.article.time = res.data.data.updateTime
                    _this.article.content = res.data.data.content
                })
            },
            getPersonageOne() {
                const _this = this
                getPersonageOne({
                    id: this.myArticleId
                }).then(function(res) {
                    // console.log(res.data)
                    _this.article.title = res.data.data.personageName
                    _this.article.editor = res.data.data.personageEditor
                    _this.article.time = res.data.data.updateTime
                    _this.article.content = res.data.data.personageDeed
                })
            },
            getTravelOne() {
                const _this = this
                getTravelOne({
                    id: this.myArticleId
                }).then(function(res) {
                    console.log(res.data)
                    _this.article.title = res.data.data.travelTitle
                    _this.article.editor = res.data.data.travelAuthor
                    _this.article.time = res.data.data.updateTime
                    _this.article.content = res.data.data.content
                })
            },
            getComment() {
                const _this = this
                getComments({
                    type: this.articleType,
                    id: this.myArticleId,
                }).then(function(res) {
                    _this.commentList = res.data.data
                })
            },
            dontReply() {
                if (this.token == '') {
                    uni.showModal({
                        title: '提示',
                        content: '您还未登录，请登录后再操作',
                        cancelText: '稍后再试',
                        success: function(res) {
                            if (res.confirm) {
                                uni.navigateTo({
                                    //1为添加，2为回复
                                    url: '/pages/login/index'
                                })
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });

                }

            },
            reply() {
                this.dontReply()
                if (this.token != '') {
                    console.log(this.value)
                    const _this = this
                    this.comment.content = this.value
                    this.comment.type = this.articleType
                    addComment(this.comment).then(function(res) {
                        if (res.data.code == 200) {
                            uni.showLoading({
                                title: '回复成功！'
                            })
                            setTimeout(function() {
                                uni.hideLoading();
                                _this.value = ''
                                _this.getComment()
                            }, 1500);
                        } else {
                            _this.$refs.uToast.show({
                                title: '出现错误！请重试！',
                                type: 'error',
                                position: 'top'
                                // url: '/pages/user/index'
                            })
                        }
                    })

                }
            },
            starthis() {
                this.dontReply()
                const _this = this
                if (this.token != '') {
                    if (this.isStar == false)
                        addAttention(this.attention).then(function(res) {
                            if (res.data.code == 200) {
                                _this.getAttentionInfo()
                            }
                        })
                    else {
                        console.log(this.starId)
                        deleteAttention({
                            id: this.starId
                        }).then(function(res) {
                            if (res.data.code == 200) {
                                _this.getAttentionInfo()
                            }
                        })

                    }

                }
                // this.isStar = !this.isStar
            },
            goReply() {
                this.$nextTick(() => {

                    // document.getElementById("scrolldIV2").scrollIntoView();	 //h5端定位到指定位置	

                    setTimeout(() => {
                        uni.createSelectorQuery().select(".comment").boundingClientRect(function(
                            res) { //定位到你要的class的位置
                            console.log("标签获取====>", res)
                            uni.pageScrollTo({
                                scrollTop: res.top,
                                duration: 0
                            });
                        }).exec()

                    }, 50)


                    //this.viewIndex = "im_" + this.ChatList.length;

                })
            },
            getAttentionInfo() {
                const _this = this
                getUserAttention(this.attention).then(function(res) {
                    if (res.data.code == 200) {
                        _this.starId = res.data.data
                        _this.isStar = true
                    } else {
                        _this.starId = 0
                        _this.isStar = false
                    }
                })
            },
            getFollowInfo(name) {
            
                const _this = this
                console.log(name)
                getUserFollow({
                    // userId : this.userInfo.id,
                    // userName: this.article.editor,
                    userId: this.userInfo.id,
                    userName: name,
                }).then(function(res) {
                    if (res.data.code == 200) {
                        _this.follow = res.data.data
                        console.log(_this.follow)
                    } else {
                        _this.follow = 0
                    }
                })
            }

        }
    }
</script>

<style lang="scss" scoped>
    .u-content {

        color: #202020;
        font-size: 32rpx;
        line-height: 1.8;

        margin: 40rpx 20rpx;
    }

    .content {
        display: flex;
        flex-direction: column;
        // height: calc(100vh - var(--window-top));
        width: 100%;
    }

    .title {
        font-size: 50rpx;
        // font-weight:bold;
        color: #000000;
        padding: 40rpx;
        letter-spacing: 5rpx;
    }

    .author {
        // margin: 0 20rpx;
        padding: 15rpx 40rpx;
        background: #F1F1F1;
        border-radius: 20rpx;

        .avatar,
        .user {
            margin-right: 20rpx;
            display: inline-block;
            vertical-align: middle;
        }

        .follow {
            float: right;
            vertical-align: middle;
        }
    }

    .username {
        font-size: 34rpx;
        color: black;
        padding: 5rpx;
    }

    .time {
        font-size: 23rpx;
        color: #999999;
        padding: 5rpx;

    }

    .followbutton {
        float: right;
    }

    .action {
        // width: 500rpx;
        width: 500rpx;
        margin: 0 auto;
        text-align: center;
    }

    .footer {
        // color: #fff;
        // line-height: 100rpx;
        // flex: 0 0 100rpx;
        /* 不放大不缩小固定100rpx */
        // height: 100rpx;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 9999;
        background-color: white;
        border: 3rpx solid #ddd;
        border-radius: 20rpx;
        // margin-bottom: 30rpx;

    }

    .inTest {
        width: 80%;
        padding: 20rpx 0 20rpx 35rpx;
        border-radius: '10px';
        float: left;

    }

    .message {
        float: right;
        width: 15%;
        padding: 30rpx 20rpx 20rpx 10rpx;
        margin-right: 20rpx;
        font-size: 32rpx;
        color: #4f4f4f;
    }

    .position-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
    }

    .fixed-bottom {
        position: fixed;
        right: 0;
        bottom: calc(var(--window-bottom) + 3px);
        left: 0;
        z-index: 1030;
    }

    .comment {
        width: 95%;
        // margin: 0 auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 100rpx;
        // font-size: 32rpx;
        // color: #333;
        padding: 20rpx 10rpx;
        // height: 700rpx;


        .comment-avatar {

            // padding: 7rpx 0;
            // position: absolute;
            display: inline-block;

            width: 14%;
            vertical-align: top;
            padding: 10rpx 0;

            // margin-left: 10rpx;
            // position: fixed;
        }

        .comment-info {
            padding: 7rpx 0;
            // position: absolute;
            display: inline-block;

            width: 86%;

            .comment-main {
                font-size: 39rpx;
                line-height: 0.5;
                // color: #5c5c5c;
                // width: 500rpx;
                // display:inline-block;
                // vertical-align: middle;
                // white-space:normal;
            }

            .comment-name {
                font-size: 30rpx;
                color: #5c5c5c;
                // width: 50rpx;
                // flex: 0 0 50rpx;
                // display:inline-block;
                // vertical-align: middle;
                // white-space:normal;
            }

            .comment-time {
                font-size: 25rpx;
                color: #999999;
                padding: 5rpx 0;
            }

            .comment-action {}
        }

    }

    .nocomment {
        text-align: center;
        height: 200rpx;
    }

    .comment-title {
        font-size: 40rpx;
        // font-weight:bold;
        color: #363636;
        padding: 20rpx 40rpx;
        letter-spacing: 5rpx;
        margin-top: 40rpx;
    }

    .shape {
        display: inline-block;
        margin: 0 20rpx;
        width: 200rpx;
        padding: 10rpx;
        border: 3rpx solid #949494;
        border-radius: 45rpx;
    }

    .iconfooter {
        // color: #fff;
        // line-height: 100rpx;
        // flex: 0 0 100rpx;
        /* 不放大不缩小固定100rpx */
        // height: 100rpx;
        position: fixed;
        right: 30rpx;
        bottom: 150rpx;
        // width: 10%;
        z-index: 9999;
        // padding: 50rpx;
        width: 100rpx;
        height: 100rpx;
        opacity: 0.7;
        text-align: left;
        border: 2rpx solid #eeeeee;
        border-radius: 50rpx;
        background-color: #939393;

        // color: #888888;
        .icon {
            padding: 17rpx 0 25rpx 20rpx;
            margin-left: 5rpx;
            // margin: 0 auto;
        }


    }

    .comment-box {
        padding: 10rpx;
        margin-bottom: 10rpx;
        // border: 3rpx solid #949494;

    }

    // .comment-avatar {
    //     width: 15%;
    //     display:inline-block;
    // }
    // .comment-main {
    //     width: 20%;
    //     display:inline-block;
    // }
</style>
